<template>
	<div>
		<popup-picker
			:data="buyStockGroups"
			v-on:change="onChange">
			<div
				:class="$style.text"
				@touchstart="touchStart">
				<p>
					<span>{{ showGroupName }}</span>
				</p>
			</div>
		</popup-picker>
	</div>
</template>

<script>
	import PopupPicker from '../../popup-picker'
	import RemoteDAO from '../../../common/remoteDAO'
	import LocalDAO from '../../../common/localDAO'

	export default {

		data () {
			return {
				showVal: '选择你想添加的位置，不选即放在我的股票中',
				buyStockGroups: [[{ name: '我的股票', value: 'xxx' }]]
			}
		},

		components: {
			PopupPicker
		},

		computed: {
			// buyStockGroups () {
			// 	return [this.$store.state.buyStockGroups]
			// }
			showGroupName () {
				const groupId = this.$store.state.buyGroupId
				const _groups = this.buyStockGroups[0]
				const _index = _groups.findIndex(g => g.value == groupId)
				return _index >=0 ? _groups[_index].name : '选择你想添加的位置，不选即放在我的股票中'
			}
		},

		created () {
			const { groupId } = this.$route.query

			if (!!groupId) {
				this.$store.dispatch('setBuyGroupId', groupId)
			}
		},

		mounted () {
			RemoteDAO.callJCL11138(LocalDAO.getUserCode(), "1", resp => {
				const { body = {} } = resp
				if (body.status == '0') {
					const { grouplist = [] } = body
	                const myItemList = [{ name: "我的股票", value: "default" }]
	                for (let i = 0; i < grouplist.length; i++) {
	                    var obj = {
	                        name: grouplist[i].group_name,
	                        value: grouplist[i].group_id
	                    };
	                    // if (defGroup == null && !CommonUtil.isEmpty(self.groupId) && self.groupId == groupList[i].group_id) {
	                    //     defGroup = {
	                    //         index: i,
	                    //         text: groupList[i].group_name
	                    //     };
	                    // }
	                    myItemList.push(obj)
	                }
	                this.buyStockGroups = [myItemList]
	                // this.$store.dispatch('setBuyStockGroups', myItemList)
				}
			}, error => {
				this.$store.dispatch('setTip', { text: error.data })
			})
		},

		methods: {
			onChange (val) {
				this.$store.dispatch('setBuyGroupId', val)
			},

			touchStart () {}
		}
	}
</script>

<style lang="less" module>

	.text {
		margin: 0;
		padding: 0 24px;
		background-color: #FFF;
		border-bottom: 1px solid #E7E7E7;

		p {
			margin: 0;
			font-size: 14px;
			line-height: 44px;
			color: rgb(153, 153, 153);
			position: relative;
			background-image: url(assets/icons/right.png);
			background-size: 14px 14px;
			background-repeat: no-repeat;
			background-position: right center;

			span {
				display: block;
				margin-right: 20px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		&:active {
			background-color: #ECECEC;
		}
	}
</style>
